<ul :class='{"vb-tree" : isRoot}'>
  <li v-for='(el,index) in nodeList' :key="index" class='vb-tree-node'>
    <i @click='toggleOpenExpand(el)' class='vb-tree-toggle'
      :class="{'bi-chevron-right':el.state === 'closed',
      'bi-chevron-down':el.state === 'open' || !el.state,'vb-tree-hidden':!el.state}">
    </i><i @click='toggleCheck(el)' v-if='checkbox' class='bi-check-circle-fill vb-tree-checkbox' 
      :class="['vb-tree-checkbox' + el.checked]"></i><span @click='clickContent(el)' class='vb-tree-node-content' 
      :class="{'vb-tree-node-select':el.selected}">
      <i v-if='icon && el.iconCls !== false' :class="[
        (el.iconCls && (!el.state || el.state === 'closed' || (el.state === 'open' && !el.openIconCls))) ? el.iconCls : '',
        (el.openIconCls && el.state === 'open') ? el.openIconCls : '',
        {
          'bi-folder2':!el.loading && !el.iconCls && el.state==='closed',
          'bi-folder2-open':!el.loading && !el.iconCls && el.state==='open',
          'bi-file-earmark-text':!el.state && !el.iconCls,
          'bi-arrow-repeat':el.loading
        }]">
      </i><span>{{el.text}}</span>
    </span>
    <vb-tree v-if='el.chLoaded && el.children && el.children.length' v-show="el.state === 'open'" 
      :node-list='el.children' :is-root='false' REPLACE></vb-tree>
  </li>
</ul>